<template>
  <div class="app-container">
    <el-table
      ref="productTable"
      :data="showList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-loading="showListLoading"
      :default-sort="{ prop: 'time', order: 'ascending' }"
      border
    >
      <el-table-column label="公司id" align="center">
        <template slot-scope="scope">
          <p>{{ scope.row.companyName }}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="时间"
        align="center"
        prop="time"
        sortable
        :filters="[
          { text: '上午', value: 'AM' },
          { text: '下午', value: 'PM' },
        ]"
        :filter-method="filterMethod"
      >
        <template slot-scope="scope">
          <p>
            {{ scope.row.time }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="地址" width="300" align="left">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center">
            <div>{{ scope.row.companyAddress }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="员工" align="center">
        <template slot-scope="scope">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <el-tag
              type="warning"
              style="margin-left: 5px; margin-right: 10px"
              :style="{
                visibility:
                  scope.row.assignPersonnel === 1 ? 'visible' : 'hidden',
              }"
              >指派</el-tag
            >
            <div>
              {{ scope.row.userName }}
            </div>
            <div></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="行程时间" align="center" prop="duration" sortable>
        <template slot-scope="scope">
          <div style="display: flex; align-items: center">
            <i
              class="el-icon-truck"
              style="font-size: 18px; margin-left: 20px; margin-right: 10px"
            ></i>
            <div>{{ convertTime(scope.row.duration) }}</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer">
      <el-pagination
        background
        @current-change="handleCurrentChangeShowList"
        layout="total,prev, pager, next,jumper"
        :page-size="showPageSize"
        :total="showTotal"
        :currentPage.sync="showParams.pageNum"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            showList: [],
            showListLoading: false
        };
    },
};
</script>

<style>
</style>